import React, { useEffect, useState } from "react";
import { Button, Divider, Space } from "antd";
import {
  WindowsOutlined,
  DribbbleSquareOutlined,
  PoweroffOutlined,
} from "@ant-design/icons";

export default function AntdCom() {
  //声明状态
  let [loading, setLoading] = useState(false);

  let click = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };

  return (
    <div>
      <h2>按钮组件</h2>
      <Space size="large">
        <Button type="primary">hello Antd</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loading}
          onClick={click}
        >
          Click me!
        </Button>
      </Space>
      <Divider></Divider>
      <h2>图标</h2>
      <WindowsOutlined style={{ fontSize: 24 }} />
      <DribbbleSquareOutlined style={{ fontSize: 24 }} />
      <Divider>精神点</Divider>

    </div>
  );
}
